<div class="pub-body">
    <h1 class="pub-tit">消息通知</h1>
    <h1></h1>
    <!-- <el-badge :value="2" class="item"> -->
        <!-- <el-button size="small">会议提醒</el-button> -->
      <!-- </el-badge> -->
<!--      <el-badge :value="3" class="item">-->
<!--        <el-button size="small">计划变更</el-button>-->
<!--      </el-badge>-->
<!--      <el-badge :value="3" class="item" >-->
<!--        <el-button size="small">逾期提醒</el-button>-->
<!--      </el-badge>-->
      <!-- <el-badge :value="2" class="item" type="warning">
        <el-button size="small">回复</el-button>
      </el-badge> -->
    <el-radio-group v-model="radio1">
      <el-radio-button label="项目进度消息"></el-radio-button>
      <el-radio-button label="任务下达"></el-radio-button>
      <el-radio-button label="计划变更"></el-radio-button>
      <el-radio-button label="逾期提醒"></el-radio-button>
      <el-radio-button label="问题上报"></el-radio-button>
    </el-radio-group>

      <el-dropdown trigger="click">
<!--        <span class="el-dropdown-link">-->
<!--          点我查看<i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i>-->
<!--        </span>-->
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item class="clearfix">
            会议提醒
            <el-badge class="mark" :value="2" />
          </el-dropdown-item> -->
          <el-dropdown-item class="clearfix">
            计划变更
            <el-badge class="mark" :value="3" />
          </el-dropdown-item>
          <el-dropdown-item class="clearfix">
            逾期提醒
            <el-badge class="mark" :value="4" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <h1></h1>
    <el-collapse v-model="activeNames" accordion>
        <el-collapse-item name="1">
            <template slot="title">
                <div class="tit warning">
                    <i class="header-icon el-icon-warning"></i>逾期提醒
                    <span class="date">2020-03-13</span>
                </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务应于2020年3月10日完成，已逾期两天，请关注！</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item>
        <el-collapse-item name="2">
            <template slot="title">
                <div class="tit warning">
                    <i class="header-icon el-icon-warning"></i>逾期提醒
                    <span class="date">2020-03-13</span>
                </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务应于2020年3月10日完成，已逾期两天，请关注！</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item>
        <el-collapse-item name="3">
            <template slot="title">
                <div class="tit warning">
                    <i class="header-icon el-icon-warning"></i>逾期提醒
                    <span class="date">2020-03-12</span>
                </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务应于2020年3月10日完成，已逾期两天，请关注！</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item>
        <el-collapse-item name="4">
            <template slot="title">
              <div class="tit info">
                  <i class="header-icon el-icon-info"></i>计划变更
                  <span class="date">2020-03-12</span>
              </div>
            </template>
            <div class="content">
                <p>xxx项目xxx任务已变更，请关注！</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item>
        <el-collapse-item name="5">
            <template slot="title">
              <div class="tit info">
                  <i class="header-icon el-icon-info"></i>计划变更
                  <span class="date">2020-03-11</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务已变更，请关注！</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item>
        <el-collapse-item name="6">
            <template slot="title">
              <div class="tit info">
                  <i class="header-icon el-icon-info"></i>计划变更
                  <span class="date">2020-03-11</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务已变更，请关注！</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item>

        <!-- <el-collapse-item name="6">
            <template slot="title">
              <div class="tit question">
                  <i class="header-icon el-icon-question"></i>搁置事项
                  <span class="date">2020-03-09</span>
              </div>
            </template>
            <div class="content">
                <p>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</p>
                <p>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item> -->
        <!-- <el-collapse-item name="7">
            <template slot="title">
              <div class="tit question">
                  <i class="header-icon el-icon-question"></i>搁置事项
                  <span class="date">2020-03-09</span>
              </div>
            </template>
            <div class="content">
                <p>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</p>
                <p>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item>
        <el-collapse-item name="8">
            <template slot="title">
              <div class="tit question">
                  <i class="header-icon el-icon-question"></i>搁置事项
                  <span class="date">2020-03-09</span>
              </div>
            </template>
            <div class="content">
                <p>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</p>
                <p>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</p>
            </div>
            <div class="button">
                <el-button type="primary">去处理</el-button>
            </div>
        </el-collapse-item> -->
    </el-collapse>
</div>

